<template>
  <div class="header">
    <Theader />
  </div>
  <!-- <div>
    <TClick />
  </div>-->
  <!-- <div>
    <TAvatar />
  </div>-->
  <div class="big_box" ref="scrollRef">
    <TComponentVue />
  </div>
  <div>
    <!-- <TSelect size="mini" /> -->
    <!-- <TIcon /> -->
  </div>
  <div>
    <button @click="test = !test">dian</button>
    <transition name="chip">
      <TChip v-if="test" />
    </transition>
  </div>
  <!-- <div>
    <TForm v-model="test105" />
  </div>
  <div>
    <TRadio />
  </div>
  <div>
    <TSlider />
  </div>
  <div>
    <TCheckbox />
  </div>
  <div>
    <TCircle />
  </div>-->
</template>

<script lang="ts" setup>
import TClick from '@/base-ui/TClick/src/TClick.vue'
import Theader from './cop/header.vue'
import TComponentVue from '@/base-ui/TComponent/src/TComponent.vue'
// import TAvatar from '@/base-ui/TAvatar/src/TAvatar.vue'
import TSelect from '@/base-ui/TSelect/src/TSelect.vue'
import TInput from '@/base-ui/TSelect - 副本/src/TSelect.vue'
import TRadio from '@/base-ui/TRadio/src/TRadio.vue'
import TChip from '@/base-ui/TChip/src/TChip.vue'
import TForm from '@/base-ui/TForm/src/TInput.vue'
import TSlider from '@/base-ui/TSlider/src/TSlider.vue'
import TIcon from '@/base-ui/TIcon/src/TIcon.vue'
import TCheckbox from '@/base-ui/TCheckbox/src/TCheckbox.vue'
import TCircle from '@/base-ui/TCircle/src/TCircle.vue'
import { ref, watchEffect, onMounted ,watch} from 'vue'
import { useStore } from '@/store'








const store = useStore()

let Y = ref()
let X = ref()
const scrollRef = ref<HTMLHtmlElement | null>(null)
const test105 = ref('')
const isChecked = ref(false)
const test = ref(false)
const searchBar = ref('')
const searchValue = ref('')
watchEffect(() => {
    // console.log(scrollRef.value?.offsetWidth, 'offsetwidth');
  // console.log(scrollRef.value?.scrollWidth, 'scrollwidth');
  // console.log(scrollRef.value?.offsetHeight, 'offsetHeight');
  // console.log(scrollRef.value?.scrollHeight, 'scrollHeight');
  // console.log(scrollRef.value?.scr, 9999999999);
  // console.log(scrollRef.value?.offsetHeight, 9999999999);

})
watch(store.state.main.newPlayList, ()=>{

})

onMounted(() => {
  if (scrollRef.value) {
    scrollRef.value.scrollTop = 3000
  }
  scrollRef.value?.addEventListener('mousedown', (e) => {
    Y.value = e.pageY
    X.value = e.pageX
    console.log(X.value, '点击事件');
    console.log(Y.value, '点击事件');
  })
  scrollRef.value?.addEventListener('mouseup', (e) => {
    Y.value = null
    console.log(Y.value, '点击事件');
  })
  scrollRef.value?.addEventListener('mousemove', (e) => {
    if (Y.value && scrollRef.value) {
      console.log('🚀 滑动事件!!');
      scrollRef.value.style.left = '200px'
      console.log(scrollRef.value.style.left);

    }
    e.preventDefault()
  })

})



scrollRef.value?.addEventListener('mousemove', (e) => {

})




</script>
<style lang="less" scoped>
.header {
  position: fixed;
  width: 100%;
  // z-index: 4;
}
.big_box {
  width: 3000px;
  // background-color: @greyLight-1;
  background-image: url(../../assets/img/乐队.jpg);
  background-size: 58%;
  background-position: 170px -60px;
  height: 812px;
  padding-top: 75px;
}
.chip-enter-active {
  animation: bounceInDown 0.8s ease;
}
.chip-leave-active {
  animation: zoomOutUp 0.8s ease;
}
</style>
